import React from "react";
import "./TodoMain.css";
import emptyImg from './empty.png';
import Swal from 'sweetalert2';

export default function TodoMain({ todos, removeTodo, checkTodo }) {
  return (
    <ul className="todo-main">
      {/* 列表渲染 */}
      {todos.map((item) => {
        return (
          <li key={item.id}>
            <label>
              <input type="checkbox" checked={item.done} onChange={e => {
                //调用 checkTodo 更新任务的完成状态
                checkTodo(item.id, e.target.checked);
              }} />
              &nbsp;
              <span className={item.done ? "done" : null}>{item.title}</span>
            </label>
            <button className="btn btn-danger" onClick={() => {
              //确认提醒
              Swal.fire({
                title: '确认操作',
                text: '您确定要删除该条任务么？',
                icon: 'warning',
                showCancelButton: true, // 显示取消按钮
                confirmButtonText: '确认',
                cancelButtonText: '取消',
              }).then((result) => {
                if (result.isConfirmed) {
                  // 用户点击了确认按钮
                  //调用 removeTodo 
                  removeTodo(item.id);
                  // 执行相应的操作
                } else if (result.dismiss === Swal.DismissReason.cancel) {
                  // 用户点击了取消按钮或者点击了遮罩层
                  // 执行取消操作或不执行任何操作
                }
              });
              
            }} >删除</button>
          </li>
        );
      })}

      {todos.length === 0 && <li style={{textAlign: 'center', padding: 20}}>
        <img src={emptyImg} width='100%' alt="" />
        </li>}
    </ul>
  );
}
